<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=360, height=600, initial-scale=1.0, user-scalable=false">
	<title>聊天室</title>
	<link rel="stylesheet" href="../css/liaotianshi.css">
	<script src="../js/DrawMsg.js"></script>
	<script src="../js/SqlDatabase.js"></script>
</head>
<body>
	<div class="phone">
		<form action="javascript:addMyMsg();" class="msg_text" id="send_message">
			<input type="text" name="msg_text" id="msg_text" class="msg_input_text" autofocus="autofocus" />
			<input type="submit" class="msg_input_submit" value="发送" />
		</form>
		<div id="msg" class="msg">
		</div>
	</div>
	<script>
	var sql = SqlDatabase();
	window.onload = function () {
		sql.drawMsg();
	}
	var send_form = document.getElementById("send_message");
	send_form.onsubmit = function check() {
		var msg_text = document.getElementById("msg_text");
		if (msg_text.value == "" || msg_text.value == null) {
			console.log(msg_text.value);
			alert("请输入文字!");
			msg_text.focus();
			return false;
		}
		msg_text.focus();
		return true;
	}
	function addMyMsg() {
		var drawMsg = DrawMsg();
		var msg = document.getElementById("msg_text");
		var email = sessionStorage.getItem("email");
		var username = sessionStorage.getItem("username");
		var color = sessionStorage.getItem("color");
		drawMsg.drawMsg(username, color, msg.value, 1);
		sql.addMsg(email, username, color, msg.value, 1);
		var i = parseInt(Math.random()*10);
		switch (i) {
			case 1 : 
			drawMsg.drawMsg("甲", "#CCC", "当前浏览器没有人在线哦, 请下次再来!", -1); 
			sql.addMsg("1@qq.com", "甲", "#CCC", "当前浏览器没有人在线哦, 请下次再来!", -1); 
			break;
			case 2 : 
			drawMsg.drawMsg("甲", "#CCC", "Sorry, I am working.", -1); 
			sql.addMsg("1@qq.com", "甲", "#CCC", "Sorry, I am working.", -1);
			break;
			default : 
			drawMsg.drawMsg("甲", "#CCC", "目前这是空的聊天室!", -1); 
			sql.addMsg("1@qq.com", "甲", "#CCC", "目前这是空的聊天室!", -1);
			break;
		}
		msg.value = "";
	}
	</script>
</body>
</html>